<template>
	<view class="container">
		<view class="section">
			<view class="swiper-box">
				<swiper :autoplay="shop.image_text.length > 1" circular @change="bindSwiperChange">
					<swiper-item v-for="(item, index) in shop.image_text" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="swiperDots m-list-flex"><view class="dot" v-for="(item, index) in shop.image_text" :key="index" :class="{'active': swiperCurrentIndex == index}"></view></view>
				<view class="btns">
					<button open-type="share" hover-class="none" class="btn"><image src="/static/icons/icon_share.png" mode="widthFix"></image></button>
				</view>
			</view>
			<view class="block">
				<view class="box info-box">
					<view class="top">
						<view class="title">{{shop.name}}</view>
						<view class="labels m-list-flex">
							<view class="label" >{{shop.type_text}}</view>
							<!-- <view class="label"> {{shop.connector}}</view> -->
						</view>
					</view>
					<view class="info m-list-flex u-border-top">
						<view class="m-cell-bd single-line">地址：{{shop.Area.province+shop.Area.city+shop.Area.region+shop.detail}}</view>
						<view class="btn" @click="openMap()"><image src="/static/icons/icon-map.png" mode="widthFix"></image></view>
					</view>
					<view class="info m-list-flex u-border-top">
						<view class="m-cell-bd single-line">联系人：{{shop.connector}}</view>
						<view class="btn" @click="call()"><image src="/static/icons/icon-tel.png" mode="widthFix"></image></view>
					</view>
				</view>
				<view class="box detail-box">
					<view class="box-head u-border-bottom m-list-flex">门店介绍</view>
					<view class="rich">{{shop.description}}</view>
				</view>
				
				<view class="box detail-box">
					<view class="box-head u-border-bottom m-list-flex">门店课程</view>
				
				<u-sticky :h5-nav-height="0" :offset-top="tabsTop-2">
						<view>
							<u-tabs :list="tabsList" :is-scroll="false" :current="tabsIndex" @change="tabsChange" active-color="#6D4BBE" inactive-color="#333333" font-size="32" bar-height="6" bar-width="100"></u-tabs>
						</view>
					</u-sticky>
					<wd-calendar-week @click="weekClick"></wd-calendar-week>
					<!-- mescroll-body start -->
					<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
						<view class="class-list">
							<view class="class-list-card" v-for="(item,index) in dataList" :key="index">
								<view class="class-list-item">
									<view class="class-list-item__avatar">
										<image class="avatar" :src="item.course.image" mode="aspectFill"></image>
										<view class="label">预约</view>
										<view class="number" @click="dropSwitch(index)"><text>{{item.appoint_count}}</text>/{{ item.course.people_count }} <u-icon class="arrow" :name="item.isSelected?'arrow-down':'arrow-up'" color="#D7D7D7" size="18"></u-icon></view>
									</view>
									<view class="class-list-item__content">
										<view class="title" style="font-size: 28rpx;">{{item.course.name}}</view>
										<view class="star">难易度：<u-rate :current="item.course.degree" :disabled="true" inactive-icon="star-fill" inactive-color="#DFDFDF" active-color="#F5C822" size="24" gutter="6"></u-rate></view>
										<view class="info">教练：{{item.teacher.name}}</view>
										<view class="info">教室：{{item.classroom.name}}</view>
										<view class="info" v-if="item.check_status == 3">时间：{{ item.change_time }}</view>
										<view class="info" v-else>时间：{{ item.start_time }}-{{item.end_time}}</view>
									</view>
									<view class="class-list-item__action">
										<view class="button" v-if="item.status != 1" :class="{'active':item.status}" @click="link(item.id)">{{item.my_appointment_count>0?'已预约':'预约'}}</view>
										<view class="" style="width: 110rpx;height: 54rpx;background: linear-gradient(131deg, #606266 0%, #606266 100%);border-radius: 99px;text-align: center;line-height: 54rpx;font-size: 24rpx;font-weight: 400;
				color: #FFFFFF;" v-else-if="item.status == 1" :class="{'title':item.status}" >{{item.my_appointment_count>0?'已预约':'已结束'}}</view>
										
									</view>
								</view>
								<view class="class-list-user" v-if="item.appointment.length>0 && item.isSelected">
									<view class="title">已预约上课的学员</view>
									<view class="thumb-box">
										<image class="thumb" v-for="(img,idx) in item.appointment" :key="idx" :src="img.avatar" mode="aspectFill"></image>
									</view>
								</view>
								<!-- <view class="class-list-comment">查看课程评价</view> -->
							</view>
						</view>
					</mescroll-body>
					<!-- mescroll-body end -->
				
			</view>
				</view>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				shopId: 0,
				shop: {
					name:'',
					type_text:'',
					connector:'',
					image_text:[],
					Area:{
						province:'',
						city:'',
						region:''
					},
					detail:''
				},
				swiperCurrentIndex: 0,
				tabsTop: '68',
				//分类
				tabsList: [{id:0,name: ''},],
				tabsIndex: 0,
				//课程
				dataList: [],
				date: '',
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 99 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '当天暂无课程安排哦'
					}
				},
			}
		},
		onLoad(options) {
			this.shopId = options.shop_id || 0;
			this.shopDetail();
			this.fetchCategory()
		},
		methods: {
			bindSwiperChange(e) {
				this.swiperCurrentIndex = e.detail.current
			},
			shopDetail(){
				this.$core.get({url:'fitness.shop/detail',data:{shop_id: this.shopId},success:(ret)=>{
					this.shop = ret.data;
				}})
			},
			//获取分类
			fetchCategory(){
				let shopId = this.shopId;
				this.$core.get({url:'fitness.common/category',loading:false,data:{shop_id:shopId},success:(ret)=>{
					 this.tabsList = ret.data;
					 this.mescroll.resetUpScroll()
				}});
			},
			//切换分类
			tabsChange(index) {
				this.tabsIndex = index;
				this.mescroll.resetUpScroll()
			},
			//切换日期
			weekClick(date) {
				this.date = date;
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				var tabsList = that.tabsList;
				var tabsIndex = that.tabsIndex;
				let shopId = this.shopId;
				var category_id = tabsList[tabsIndex]?tabsList[tabsIndex].id :0;
				var date = that.date;
				if(!shopId || !category_id) return false;
				that.$core.post({url:'fitness.course_arrangement/lists',loading:false,data:{shop_id:shopId,course_category_id:category_id,date:date,page:1,pagesize:99},success:(ret)=>{
					if(page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
					that.dataList = that.dataList.concat(ret.data.data); //追加新数据
					 that.mescroll.endSuccess(ret.data.data.length);
				}});
			},
			dropSwitch(index) {
			    let data = this.dataList[index]
			    let isSelected = data.isSelected
				this.$set(data,'isSelected',!isSelected)
			},
			link(id) {
				this.$utils.href('/pages/class/classDetail/classDetail?course_id='+id)
			},
			call(){
				let tel = this.shop.mobile;
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			// 导航
			openMap(e) {
				let shop = this.shop;
				uni.openLocation({
					latitude: Number(shop.lat),
					longitude: Number(shop.lng),
					name: shop.name,
					address: shop.Area.province+shop.Area.city+shop.Area.region
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-border-bottom, .u-border-top {
		&::after {
			border-color: #F2F3F7;
		}
	}
	.single-line{ text-overflow:ellipsis;white-space:nowrap;overflow:hidden; }
	.m-list-flex{display: flex;align-content: center;align-items: center;}
	.m-list-flex .m-cell-bd{flex: 1;overflow: hidden;}
	.container {
		background-color: #F5F5F5;
		.section {
			.swiper-box {
				position: relative;
				swiper {
					display: block;
					width: 100%;
					height: 350rpx;
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.swiperDots {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 60rpx;
					.dot {
						display: block;
						width: 12rpx;
						height: 12rpx;
						background-color: #E1E7ED;
						border-radius: 50%;
						overflow: hidden;
						& + .dot {
							margin-left: 9rpx;
						}
						&.active {
							width: 51rpx;
							border-radius: 6rpx;
							background-color: #FFFFFF;
						}
					}
				}
				.btns {
					position: fixed;
					top: 23rpx;
					right: 39rpx;
					z-index: 99;
					.btn {
						display: block;
						// width: 46rpx;
						// height: 46rpx;
						border-radius: 50%;
						overflow: hidden;
						padding: 0;
						image {
							display: block;
							width: 40rpx;
							height: 40rpx;
							padding: 3.5rpx;
						}
						& + .btn {
							margin-top: 18rpx;
						}
					}
				}
			}
			.block {
				padding: 0 19rpx;
				margin-top: -33rpx;
				position: relative;
				z-index: 1;
			}
			.box {
				background-color: #FFFFFF;
				border-radius: 23rpx;
				margin-bottom: 25rpx;
				padding: 19rpx;
				.box-head {
					height: 64rpx;
					padding: 0 12rpx;
					font-size: 28rpx;
					color: #000000;
					font-weight: 500;
					margin-top: 8rpx;
					.more {
						font-size: 25rpx;
						margin-left: auto;
						image {
							display: block;
							width: 25rpx;
							height: 25rpx;
							margin-left: 4rpx;
						}
					}
				}
			}
			.info-box {
				.top {
					padding: 16rpx 12rpx;
					.title {
						font-size: 37rpx;
						color: #000000;
						font-weight: 500;
						margin-bottom: 16rpx;
					}
					.score {
						margin-bottom: 14rpx;
						font-size: 21rpx;
						color: #2D2D2D;
						image {
							display: block;
							width: 37rpx;
							height: 37rpx;
						}
						text {
							margin-left: 19rpx;
							& + text {
								margin-left: 26rpx;
							}
						}
					}
					.labels {
						flex-wrap: wrap;
						.label {
							display: inline-block;
							width: 80rpx;
							height: 32rpx;
							padding: 0 14rpx;
							border-radius: 5rpx;
							font-size: 18rpx;
							color: #FFFFFF;
							line-height: 32rpx;
							background-color: #6D4BBE;
							flex-shrink: 0;
							margin-right: 9rpx;
							margin-bottom: 9rpx;
							&.blue {
								background-color: #478ECA;
							}
						}
					}
				}
				.info {
					height: 92rpx;
					font-size: 30rpx;
					color: #000000;
					padding: 0 12rpx;
					.btn {
						display: block;
						width: 40rpx;
						height: 40rpx;
						background-color: transparent;
						margin-left: 25rpx;
						image {
							display: block;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
			.detail-box {
				.rich {
					padding: 25rpx 12rpx;
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
				}
			}
		}
	}
</style>
